// 1. rem 布局
// rem 是CSS3新增的一个相对单位，它以 HTML 元素的 font-size 为比例：
// 修改HTML元素的字体大小可以成比例的调整以 rem 为单位的属性，通过这一个特性，
// 我们可以实现将视窗按一定比例划分为一份一份的，当页面内元素刚好分完所有的份数，
// 页面内容即充满整个视窗且无横向滚动条。
// 优点：rem 布局能很好的实现在不同尺寸的屏幕横向填满屏幕，且在不同屏幕元素大小比例一致
// 缺点：在大屏设备（Pad）上，元素尺寸会很大，页面显示更少的内容。
// 针对大屏改进方案：
// 限制 rem 的最大值，
// 通过媒体查询，限制内容最大宽度，

// 2. vw/vh 布局
// vw/vh 方案与 rem 方案类似，都是将页面分成一份一份的，只不过 vw/vh 是将页面分为 100 份
// ，1vw = device-width/100

// 3. 百分比布局
// 在 css 中，我们可以使用百分比来实现布局，但是需要特定宽度时，这个百分比的计算对开发者来说并不友好
// ，且元素百分比参考的对象为父元素，元素嵌套较深时会有问题。

// 4. 响应式布局
// 通过媒体查询@media ，可以针对不同的屏幕进行单独设置，但是针对所有的屏幕尺寸做适配显然是不合理的，但是可以用来处理极端情况
// （例如 IPad 大屏设备）或做简单的适配（隐藏元素或改变元素位置）

// 5. px 为主，搭配 vw/vh、媒体查询与 flex 进行布局
// 编写 <meta> 标签设置 viewport 的内容 width=device-width，让网页宽度等于视窗宽度
// 在 css 中使用 px
// 在适当的场景使用flex布局，或者配合vw进行自适应
// 在跨设备类型的时候（pc <-> 手机 <-> 平板）使用媒体查询
// 在跨设备类型如果交互差异太大的情况，考虑分开项目开发
